import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Table, Divider, Tag, Button, Popconfirm, message, Icon,
    Spin
} from 'antd';
import styles from './index.less';

const namespace = 'address';

class Address extends React.Component {
    constructor() {
        super();
        this.state = {
            loading: true,
            pagination: {
                showSizeChanger: true,
                showTotal: total => `共 ${total} 条记录`,
                pageSize: 10,
                total: 0,
            },
            pageIndex: 1,
            sourceData:[]
        }
    }

    addAddress =() => {
        if(this.state.sourceData.length <=20 ) {
            router.replace({
                pathname: `/${window.storeId}/store/address/add`,
            });
        } else {
            message.error('最多添加20个地址')
        }     
    }

    EditUser =(id) => {
        router.replace({
            pathname: `/${window.storeId}/store/address/edit/${id}`,
        });
    }

    delete =(id) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'address/DeleteStoreAddress',
            payload: {
                Id: id
            },
            callBack: {
                success: res => {
                    if(res.Code ===0) {
                        this.setState({
                            loading: true
                        })
                        message.success('删除成功')
                        this.getStoreAddressListWithPage()
                    }
                },
                error: res => {
                    message.error(res.Msg);
                }, 
            }
        })
    }

    componentDidMount() {
        this.getStoreAddressListWithPage();
    }

    getStoreAddressListWithPage =() => {
        const { dispatch } = this.props;
        const {pageIndex} = this.state;
        dispatch({
            type: 'address/GetStoreAddressListWithPage',
            payload: {
                PageIndex: pageIndex,
                PageSize: this.state.pagination['pageSize']
            },
            callBack: {
                success: res => {
                    if(res.Code ===0) {
                        this.setState({
                            loading: false,
                            pagination: {
                                pageSize: this.state.pagination['pageSize'],
                                current: pageIndex,
                                total: res.Data.Total,
                                showSizeChanger: true,
                                showTotal: total => `共 ${total} 条记录`,
                              },
                          sourceData: res.Data.DataList?res.Data.DataList:[]
                        })
                    }
                },
                error: res => {
                    message.error(res.Msg);
                },  
            }
        })
    }

    //tab切换
    onTableChange =(pagination, filters, sorter) => {
        this.setState({
            loading: true,
            pagination: {
                pageSize: pagination.pageSize,
                total: pagination.total,
                showSizeChanger: true,
                showTotal: total => `共 ${total} 条记录`,
            },
            pageIndex: pagination.current,
        }, () => {
            this.getStoreAddressListWithPage();
        }
    )}


    render() {
        const {sourceData, loading} = this.state;
        const columns = [
            {
                title: '联系人',
                dataIndex: 'ContractName',
                key: 'ContractName',
            },
            {
                title: '地址',
                key: 'realName',
                width: '30%',
                render: (text, data) => {
                    return (
                        <div>
                            <div style={{marginBottom: 4}}>
                                {data.IsDefaultDelivery &&<Tag color="geekblue">默认发货地址</Tag>}
                                {data.IsDefaultReceiving &&<Tag color="orange">默认收货地址</Tag>}
                            </div>
                            <div>
                                <span>{data.ProvName}</span>
                                <span>{data.CityName}</span>
                                <span>{data.DistrictName}</span>
                                {data.AddressDetail&&<span>{data.AddressDetail}</span>}
                            </div>
                        </div>
                        
                    )                    
                }
            },
            {
                title: '联系方式',
                dataIndex: 'ContractPhone',
                key: 'ContractPhone',
            },
            {
                title: '邮编',
                dataIndex: 'ZipCode',
                key: 'ZipCode',
            },
            {
                title: '操作',
                key: '操作',
                align: 'right',
                render: (text, data) => (
                            < div >
                                <a onClick={() => this.EditUser(data.Id)}>
                                    编辑
                                </a>
                                <Divider type="vertical" />
                                <Popconfirm
                                    title="确认删除?"
                                    okText="确认"
                                    cancelText="取消"
                                    onConfirm={() => this.delete(data.Id)}
                                >
                                    <a>
                                        删除
                                    </a>
                                </Popconfirm>
                            </div >
                    )
                }
        ];

        return (
            <Spin spinning={loading}>
                <div>
                    <Button
                        type="primary"
                        style={{marginBottom: 16}}
                        onClick={this.addAddress}
                    >
                        新建地址
                    </Button>
                    <span className={styles.topSpan}>已添加{sourceData.length}个，最多可创建20个地址</span>
                </div>
                
                <Table
                    columns={columns}
                    dataSource ={sourceData}
                    rowKey={record => record.Id}
                    onChange={this.onTableChange}
                    pagination={this.state.pagination}
                />
            </Spin>
        )
    }
}

export default connect(({ address, global, loading }) => ({
    address,
    loading: loading.effects['address/GetStoreAddressListWithPage'],
}))(Address);